<template>
  <div class="reasons">
    <div v-if="isReasons(reasons,false).length" class="reasons-item">
      <div>驳回原因：</div>
      <div>
        <div v-for="item in isReasons(reasons,false)" :key="item.rejectReasonId">{{ item.rejectReason }}</div>
      </div>
    </div>
    <div v-if="isReasons(reasons,true).length" class="reasons-item">
      <div>驳回备注：</div>
      <div>
        <div v-for="item in isReasons(reasons,true)" :key="item.rejectReasonId" v-html="item.rejectReason" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Reasons',
  props: {
    data: {
      type: null || String,
      default: ''
    }
  },
  computed: {
    reasons() {
      if (!this.data) return []
      try {
        const data = JSON.parse(this.data)
        return data
      } catch (e) {
        return []
      }
    }
  },
  methods: {
    isReasons(v, flag) {
      const arr = v.filter((item) => { return flag ? item.rejectReasonId === 0 : item.rejectReasonId !== 0 })
      return arr
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ p{
  margin: 0!important;
  padding: 0!important;
}
.reasons{
  max-width: 500px;
  .reasons-item {
    display: flex;
    line-height: 20px;
    &>div:first-child{
      width: 80px;
    }
    &>div:nth-child(n+2){
      flex: 1;
      &>div{
        margin-bottom: 10px;
      }
    }
  }
}
</style>
